<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-row>
        <el-col :span="21">
          <i class="el-icon-search"></i>
          <span class="search-title">筛选搜索</span>
        </el-col>
        <el-col :span="3" style="display: flex;justify-content: end">
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        </el-col>
      </el-row>
      <el-form :model="body" ref="queryForm" :inline="true" size="small" label-width="140px">
        <el-form-item label="用户名称:" prop="userName">
          <el-input v-model="body.userName" placeholder="请输入用户名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户电话:" prop="phoneNumber">
          <el-input v-model="body.phoneNumber" placeholder="请输入用户电话" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户类型:" prop="userType">
          <el-select v-model="body.userType" placeholder="请选择">
            <el-option v-for="item in userTypeOption" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否活跃:" prop="isActive">
          <el-select v-model="body.isActive" placeholder="请选择">
            <el-option v-for="item in isActiveOption" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <i class="el-icon-tickets"></i>
      <span style="padding-left: 6px;">数据列表</span>
    </el-card>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="序号" v-slot="{ $index }" fixed="left" align="center" style="width: 10%;">
        {{ getSerialNumber($index) }}
      </el-table-column>
      <el-table-column property="userName" label="用户昵称" align="center">
      </el-table-column>
      <el-table-column property="amount" label="可提现余额" align="center">
      </el-table-column>
      <!-- <el-table-column property="avatar" label="用户头像" align="center">
        <template #default="scope">
          <img :src="scope.row.avatar" alt="Image" style="width: 60px; height: 60px;" />
        </template>
      </el-table-column> -->
      <el-table-column property="phoneNumber" label="用户电话" align="center">
      </el-table-column>
      <!-- <el-table-column property="email" label="邮箱" align="center">
      </el-table-column> -->
      <el-table-column property="regionCode" label="用户所属区域" align="center">
      </el-table-column>
      <el-table-column property="isActive" label="用户状态" align="center">
      </el-table-column>
      <el-table-column property="userType" label="用户类型" align="center">
      </el-table-column>
      <el-table-column property="userType" label="是否订阅" align="center">
      </el-table-column>
      <el-table-column property="registrationDate" label="用户注册时间" align="center" >
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页器 -->
    <pagination v-show="true" @pagination="handlePagination" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" />
    <!-- 用户信息详情对话框 -->
    <el-dialog title="用户信息" :visible.sync="dialogVisible" :before-close="handleClose">
      <el-form :inline="true" size="small" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名称:">
              {{ userInfo.userName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型:">
              {{ userInfo.userType }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码:">
              {{ userInfo.phoneNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱:">
              {{ userInfo.email }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否活跃:">
              {{ userInfo.isActive }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="头像:">
              <img style="width: 60px;height: 60px;" :src="userInfo.avatar" alt="头像">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import AreaSelected from "@/components/AreaSelected/index"
import { getUserListApi, getUserInfoApi } from "@/api/user/userlist"
import { getUserData, getUserType } from "@/utils/transform/transform"
import { calcMixin } from "@/utils/mixins/calcMixin"

export default {
  name: "UserList",
  components: { AreaSelected },
  mixins: [calcMixin],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      body: {
        userName: "",
        userType: "",
        phoneNumber: "",
        isActive: ""
      },
      tableData: [],
      userTypeOption: [
        {
          id: 1,
          value: "普通用户"
        },
        {
          id: 2,
          value: "管理员"
        },
        {
          id: 3,
          value: "接单员"
        }
      ],
      isActiveOption: [
        {
          id: 0,
          value: "禁用"
        },
        {
          id: 1,
          value: "激活"
        }
      ],
      userInfo: {},
      dialogVisible: false,
      total: 0
    }
  },
  methods: {
    // 获取用户列表数据
    async getUserList() {
      const res = await getUserListApi(this.queryParams, this.requestBody)
      if (res.code === 200) {
        this.tableData = getUserData(res.rows)
        this.total = res.total
      }
    },
    // 查询按钮操作
    handleQuery() {
      this.getUserList()
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm("queryForm")
      this.getUserList()
    },
    // 切换分页操作
    handlePagination({ page, limit }) {
      this.queryParams = {
        ...this.queryParams,
        pageNum: page,
        pageSize: limit
      }
      this.getUserList()
    },
    // 查看按钮操作
    async handleView(row) {
      this.dialogVisible = true
      const res = await getUserInfoApi(row.id)
      if (res.code === 200) {
        this.userInfo = getUserType(res.data)
        console.log(this.userInfo)
      }
    },
    handleClose() {
      // 关闭遮罩层
      this.dialogVisible = false
      // 清空用户信息
      this.userInfo = {}
    }
  },
  mounted() {
    // 初始化加载省份
    // 获取用户数据
    this.getUserList()
  },
}
</script>
<style lang="scss" scoped></style>